@use '../../design-system/' as *;

$indent: 24px;

// Ignore padding & remove border if within tabbed container
:global(.tabs-outer) .expandableSnippet pre:global(.code) {
    margin: -$spacing-size-4;
    border: none;
}

.expandableSnippet pre > code {
    background-image: none;

    code {
        color: var(--code-text-color);
    }
}

.jsonProperty {
    position: relative;
    margin-top: $spacing-size-1;
    margin-bottom: $spacing-size-1;
}

.type-nested-object > .jsonProperty {
    padding-left: $indent;
}

.jsonObjectUnion,
.jsonObject {
    padding-left: $indent;
}

.deprecated {
    text-decoration: line-through;
}

.expandable {
    cursor: pointer;
}

.unexpandable {
    cursor: default;
}

.expander {
    --icon-size: 1em;

    transition: transform $transition-default-timing;

    &.active {
        transform: rotate(90deg);
    }
}

.expanderBar {
    position: absolute;
    width: 2px;
    bottom: 1px;
    left: -12px;
    top: 17px;
    background: var(--background-500);
}

.propertyName {
    position: relative;
    color: var(--property-color);

    .expander {
        position: absolute;
        left: -18px;
        top: 3px;
    }
}

.jsonUnionItem {
    position: relative;

    .expander {
        position: absolute;
        left: -18px;
        top: 3px;
        font-weight: normal;
    }
}

.unionTypeProperty {
    color: var(--property-color);
}

.jsdocExpandable {
    font-size: var(--font-size-medium);
    font-family: var(--text-font-family);
    padding: $spacing-size-1 10px $spacing-size-1;
    white-space: normal;
    cursor: text;
}
